<template>
  <div class="bar-chart-21 chart" ref="barChart21"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
const barChart21 = ref(null);
const echarts = inject("$echarts");

let xAxisData = [
  "张家港市",
  "常熟市",
  "太仓市",
  "昆山市",
  "吴江区",
  "吴中区",
  "相城区",
  "姑苏区",
  "工业园区",
];
let seriesData = [
  [320, 302, 120, 100, 540, 123, 345, 667, 333, 122, 211, 99],
  [320, 302, 120, 100, 540, 123, 345, 667, 333, 122, 211, 99],
  [320, 302, 120, 100, 540, 123, 345, 667, 333, 122, 211, 99],
  [320, 302, 120, 100, 540, 123, 345, 667, 333, 122, 211, 99],
];
const option = {
  compCode: "C202309027",
  backgroundColor: "#000",
  tooltip: {
    backgroundColor: "#053962", // 设置背景色为半透明红色
    borderColor: "#165e9e", // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: "#fff",
    },
    trigger: "axis",
    axisPointer: {
      // Use axis to trigger tooltip
      type: "line", // 'shadow' as default; can also be 'line' or 'shadow'
    },
  },
  legend: {
    icon: "circle",
    orient: "horizontal",
    itemGap: 40,
    itemWidth: 14,
    itemHeight: 14,
    textStyle: {
      fontSize: 14,
      color: "white",
      fontWeight: 400,
      padding: [4, 0, 0, 0],
    },
  },
  color: ["#00C6F1", "#F7B000", "#3172F5", "#1DE5D4", "#1DE5D4"],
  grid: {
    top: "8%",
    left: "8%",
    right: "0",
    bottom: "10%",
    containLabel: false,
  },
  xAxis: {
    type: "category",
    data: xAxisData,
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      color: "white",
    },
    axisLine: {
      show: false,
    },
  },
  yAxis: {
    //   去网格线
    splitLine: {
      show: false,
    },
    type: "value",
    name: "万亩",
    top: 10,
    // 标题名称颜色
    nameTextStyle: {
      color: "white",
      fontSize: 14,
      fontWeight: 800,
      padding: [0, 0, -10, 20, 10],
    },
    axisLine: {
      // show: false ,// 去除轴线
      lineStyle: {
        lineStyle: {
          color: "white",
        },
      },
    },
    axisLabel: {
      formatter: "{value}",
      color: "white", // 文本颜色
      fontSize: "14",
    },
  },
  series: [
    {
      name: "耕地上的高标准",
      type: "bar",
      stack: "total",
      label: {
        show: false,
        color: "#FFFFFF",
        formatter: function (e) {
          // return e.value ? e.value : "";
          // return e.value ? e.seriesName : "";
        },
      },
      barWidth: 20,
      emphasis: {
        focus: "series",
      },
      data: seriesData[0],
    },
    {
      name: "永农内高标准",
      type: "bar",
      stack: "total",
      barWidth: 20,
      label: {
        show: false,
        color: "#FFFFFF",
        formatter: "{a}",
      },
      emphasis: {
        focus: "series",
      },
      data: seriesData[1],
    },
    {
      name: "耕地内后备资源",
      type: "bar",
      stack: "auto",
      barWidth: 20,
      label: {
        show: false,
        color: "#FFFFFF",
        formatter: "{a}",
      },
      emphasis: {
        focus: "series",
      },
      data: seriesData[2],
    },
    {
      name: "永农内后备资源",
      type: "bar",
      stack: "auto",
      barWidth: 20,
      label: {
        show: false,
        color: "#FFFFFF",
        formatter: "{a}",
      },
      emphasis: {
        focus: "series",
      },
      data: seriesData[3],
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(barChart21.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
